<template>
  <div class="row q-pa-md">
    <device-map
      class="full-width full-height col"
      :map-id="mapId"
      :center-connected="centerConnected"
      pointShow
      robotShow
      @getPoint="getPoint"
      v-if="mapId"
    />
    <q-card class="full-height full-width col" :class="ui.cardClass" v-else>
      <div class="flex-center absolute-center text-h4">
        {{ $t("StationCalibrate.未连接机器人") }}
      </div>
    </q-card>
    <station-operate
      class="full-width full-height col q-gutter-y-md q-col-gutter-x-md"
      :map-id="mapId"
      :device-id="deviceId"
      :pose-id="poseId"
    />
  </div>
</template>
<script setup>
import DeviceMap from "components/device/DeviceMap.vue";
import { computed, ref } from "vue";
import { status } from "src/utils/deviceWs";
import { useUiStore } from "stores/ui";
import StationOperate from "components/setting/StationOperate.vue";
import { useI18n } from "vue-i18n";

const $t = useI18n().t;
const ui = useUiStore();
// 计算地图id
const mapId = computed(() => status.value.mapID);
// 计算是否连接到中控
const centerConnected = computed(() => status.value.centerConnected);
// 机器人ID
const deviceId = computed(() => status.value.device);
const poseId = ref("");
// 获取选中后的点位id
function getPoint(p) {
  poseId.value = p.id;
}
</script>
<style scoped></style>
